<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园e商-用户登录</title>

    <link rel="stylesheet" type="text/css" href="/public/css/login.css">

</head>
<body>


<div class="wrapper">

    <div class="container">
        <h1>Welcome</h1>
        <div class="form">
            <form id="loginForm" method="post" action="/loginAction">
                <input type="text" name="loginName" value="${loginName}" id="loginName" placeholder="用户名">
                <input type="password" name="password" id="password" placeholder="密码">
            </form>
            <button type="submit" id="login-button">登录</button>
        </div>
    </div>

    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

<script type="text/javascript" src="/public/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/public/lib/layer/js/layer.js"></script>

<script type="text/javascript">

    $(function(){
        // 提示
        var msg = '${flash.get("error")}';
        if(msg) {
            layer.msg(msg);
        }
    })

    $('#login-button').click(function(event){
        if($("#loginName").val() == ""){
            layer.msg('请输入用户名');
            return;
        }
        if($("#password").val() == ""){
            layer.msg('请输入密码');
            return;
        }
        $("#login-button").hide();
        event.preventDefault();
        $('form').fadeOut(500);
        $('.wrapper').addClass('form-success');
        setTimeout("$('#loginForm').submit()", 1500);
    });
</script>

</body>
</html>